<template>
  <el-form class="eleConfigForm" ref="eleConfigData" :model="eleConfigData" label-width="80px" size="mini">
    <el-form-item label="标签名"> 
      <el-input v-model="eleConfigData.label"></el-input>
    </el-form-item>
    <el-form-item label="占位文本">
      <el-input v-model="eleConfigData.placeholder"></el-input>
    </el-form-item>
    <el-form-item label="键名">
      <el-input v-model="eleConfigData.key"></el-input>
    </el-form-item>
    <el-form-item label="默认值">
      <el-input v-model="eleConfigData.value"></el-input>
    </el-form-item>
    <el-form-item label="隐藏">
      <el-checkbox v-model="eleConfigData.hide"></el-checkbox>
    </el-form-item>
    <el-form-item label="禁用">
      <el-checkbox v-model="eleConfigData.disabled"></el-checkbox>
    </el-form-item>
    <el-form-item label="必填">
      <el-checkbox v-model="requires"></el-checkbox>
    </el-form-item>
    <el-form-item label="所占行">
      <el-input-number v-model="eleConfigData.spannum" :min="1" :max="24" label="一行以24列分割"></el-input-number>
      （一行以24列分割）
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  props: {
    eleConfigData: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      requires: true
    };
  },
  watch: {
    requires: function(val) {
      const ruleIndex = this.eleConfigData.rules.findIndex(r => r.required !== undefined);
      if (val) {
        ruleIndex === -1
          && this.eleConfigData.rules.unshift({
            required: true,
            message: '必填项',
            trigger: 'change',
          });
      } else {
        ruleIndex > -1 && this.eleConfigData.rules.splice(ruleIndex, 1);
      }
    }
  }
};
</script>